<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>bootstrap-table - 光年(Light Year Admin)后台管理系统模板</title>
<link rel="icon" href="${ctx}/static/bootstrap/favicon.ico"
	type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description"
	content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="${ctx}/static/bootstrap/css/bootstrap.min.css"
	rel="stylesheet">
<link href="${ctx}/static/bootstrap/css/materialdesignicons.min.css"
	rel="stylesheet">
<link href="${ctx}/static/bootstrap/css/animate.css" rel="stylesheet">
<link href="${ctx}/static/bootstrap/css/style.min.css" rel="stylesheet">
<link
	href="${ctx}/static/bootstrap/js/bootstrap-table/bootstrap-table.min.css"
	rel="stylesheet">
<link
	href="${ctx}/static/bootstrap/js/x-editable/1.5.1/bootstrap3-editable/css/bootstrap-editable.min.css"
	rel="stylesheet">
<!--对话框-->
<link rel="stylesheet" href="${ctx}/static/bootstrap/js/jconfirm/jquery-confirm.min.css">
<link href="${ctx}/static/bootstrap/css/materialdesignicons.min.css" rel="stylesheet">
<link href="${ctx}/static/bootstrap/css/animate.css" rel="stylesheet">
<link href="${ctx}/static/bootstrap/css/style.min.css" rel="stylesheet">
<style type="text/css">
	.error{color:red;}
</style>

</head>

<body>
	<div class="container-fluid p-t-15">
		<div class="row">
			<div class="col-lg-12">
				<div class="card">
					<div class="card-header">
						<h4>分类示例</h4>
					</div>
					
					<!-- 综合查询表单开始 -->
					<div class="card-body" style="margin-bottom:0px;padding-bottom:0px;">
						<form class="form-inline" id="form-curriculum-query">
							<div class="form-group">
								<label class="control-label" for="curName">课程名称：</label> 
								<input class="form-control" type="text" id="curName" name="curName">
							</div>
							
						&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
							<div class="form-group">
								<label class="control-label" for="curCredit">学分信息：</label> 
								<input class="form-control" type="text" id="curCredit" name="curCredit">
							</div>
							
							&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
							<div class="form-group">
								<label class="control-label" for="curLocation">上课地点：</label> 
								<input class="form-control" type="text" id="curLocation" name="curLocation">
							</div>
							&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
							<div class="form-group">
								<button class="btn btn-info" type="button" id="btnQuery">查询</button>
								&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
								<button class="btn btn-success" type="button" id="btnReset">重置</button>
							</div>
						</form>
					</div>
					<!-- 综合查询表单结束 -->
					
					<div class="card-body">
						<div id="toolbar" class="toolbar-btn-action">
							<button id="btn_add" type="button" class="btn btn-primary m-r-5"
								data-toggle="modal" data-target="#addModal" data-whatever="@mdo">
								<span class="mdi mdi-plus" aria-hidden="true"></span>新增
							</button>

							<button id="btn_delete" type="button" class="btn btn-danger" onclick="deleteByIds()">
								<span class="mdi mdi-window-close" aria-hidden="true"></span>删除
							</button>
						</div>
						<table id="myTable"></table>
						<!-- 新增模态框开始 -->
						<div class="modal fade" id="addModal" tabindex="-1" role="dialog"
							aria-labelledby="exampleModalLabel">
							<div class="modal-dialog" role="document">
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal"
											aria-label="Close">
											<span aria-hidden="true">&times;</span>
										</button>
										<h4 class="modal-title" id="exampleModalLabel">新增课程</h4>
									</div>
									<div class="modal-body">
										<form method="post" action="${ctx}/curriculum/add" id="form-add">
											<div class="form-group">
												<label for="curName" class="control-label">课程名称：</label>
												<input type="text" class="form-control" id="curName"
													name="curName" required="required">
											</div>
											<div class="form-group">
												<label for="teaId" class="control-label">教师编号：</label> <input
													type="text" class="form-control" id="teaId"
													name="teaId"  required="required">
											</div>
											<div class="form-group">
												<label for="curCredit" class="control-label">学分：</label> <input
													type="text" class="form-control" id="curCredit"
													name="curCredit"  required="required">
											</div>
											<div class="form-group">
												<label for="curTimes" class="control-label">上课时间：</label> <input
													type="text" class="form-control" id="curTimes"
													name="curTimes"  required="required">
											</div>
											<div class="form-group">
												<label for="curLocation" class="control-label">上课地点：</label> <input
													type="text" class="form-control" id="curLocation"
													name="curLocation"  required="required">
											</div>
										</form>
									</div>
									<div class="modal-footer">
										<button type="submit" id="btnSubmit" onclick="add()"
											class="btn btn-primary">保存</button>
										<button type="button" class="btn btn-default"
											data-dismiss="modal">关闭</button>
									</div>
								</div>
							</div>
						</div>
						<!-- 新增模态框结束 -->
						<!-- 编辑Model开始 -->
						<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
							<div class="modal-dialog" role="document">
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal" aria-label="Close">
											<span aria-hidden="true">&times;</span>
										</button>
										<h4 class="modal-title" id="exampleModalLabel">编辑课程</h4>
									</div>
									<div class="modal-body">
										<form id="form-curriculum-edit">
											<input type="hidden" id="id" name="id">
											<input type="hidden" id="index" name="index">
											<div class="form-group">
												<label for="curName" class="control-label">课程名称：</label>
												<input type="text" class="form-control" id="curName" name="curName" required="required">
											</div>
											<div class="form-group">
												<label for="teaId" class="control-label">教师编号：</label>
												<input type="text" class="form-control" id="teaId" name="teaId" required="required">
											</div>
											<div class="form-group">
												<label for="curCredit" class="control-label">学分信息：</label>
												<input type="text" class="form-control" id="curCredit" name="curCredit" required="required">
											</div>
											<div class="form-group">
												<label for="curTimes" class="control-label">上课时间：</label>
												<input type="text" class="form-control" id="curTimes" name="curTimes" required="required">
											</div>
											<div class="form-group">
												<label for="curLocation" class="control-label">上课地点：</label>
												<input type="text" class="form-control" id="curLocation" name="curLocation" required="required">
											</div>
										
											</div>
										</form>
									</div>
									<div class="modal-footer">
										<button type="button" id="btnSubmit" onclick="edit()" class="btn btn-primary">保存</button>
										<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
									</div>
								</div>
							</div>
						</div>
						<!-- 编辑Model结束 -->
					</div>
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript"
		src="${ctx}/static/bootstrap/js/jquery.min.js"></script>
	<script type="text/javascript"
		src="${ctx}/static/bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript"
		src="${ctx}/static/bootstrap/js/perfect-scrollbar.min.js"></script>
	<script type="text/javascript"
		src="${ctx}/static/bootstrap/js/bootstrap-table/bootstrap-table.min.js"></script>
	<script type="text/javascript"
		src="${ctx}/static/bootstrap/js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>

	<!--行内编辑插件-->
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/x-editable/1.5.1/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/bootstrap-table/extensions/editable/bootstrap-table-editable.min.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/main.min.js"></script>
	
	<!-- 表单验证 -->
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/jquery-validation-1.19.3/jquery.validate.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/jquery-validation-1.19.3/additional-methods.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/jquery-validation-1.19.3/messages_zh.js"></script>

	<!--对话框-->
	<script src="${ctx}/static/bootstrap/js/jconfirm/jquery-confirm.min.js"></script>
	
	<!--消息提示-->
	<script src="${ctx}/static/bootstrap/js/bootstrap-notify.min.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/lightyear.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/main.min.js"></script>
	<script type="text/javascript">
	
	
		//获取上下文路径
		
		function getContextPath() {
			var pathName = document.location.pathname;
			var index = pathName.substr(1).indexOf("/");
			var result = pathName.substr(0, index + 1);
			return result;
		}
		var ctx = getContextPath();
		
		var addForm = $("#form-add");
		var editForm = $("#form-curriculum-edit");
		var queryForm = $("#form-curriculum-query");
		var deleteUrl = "${ctx}/curriculum/delete/";
		var addUrl = "${ctx}/curriculum/add";
		var editUrl = "${ctx}/curriculum/edit";
		var listUrl = '${ctx}/curriculum/map';
		
		
		
		//页面加载完毕就执行的逻辑，表单验证
		$(function(){
			var options = {
			 onkeyup:function(element, event){
					var value = $.trim(this.elementValue(element));
					$(element).val(value);
					},	
				rules: {//定义验证队则
					curName: {
						required: true
					},
					teaId: {
						required: true
					},
					curCredit: {
						required: true
					},
					curTimes: {
						required: true
					},
					curLocation: {
						required: true
					}
				},
				messages:{//定义提示信息
					curName: {
						required: '课程名称不能为空'
					},
					teaId: {
						required: '教师编号不能为空'
					},
					curCredit: {
						required: '学分信息不能为空'
					},
					curTimes: {
						required: '上课时间不能为空'
					},
					curLocation: {
						required: '上课地点不能为空'
					}
				}			
			};
			var validate1 = addForm.validate(options);
			var validate2 = editForm.validate(options);		
		})	
		
		
		//综合查询
		$("#btnQuery").click(function(){
			$('#myTable').bootstrapTable('refresh');
		})
		
		//重置查询
		$("#btnReset").click(function(){
			$("#form-curriculum-query")[0].reset();
			$('#myTable').bootstrapTable('refresh');
		})
		
		//添加课程
		function add(){
			if(addForm.valid()){//valid()方法：返回表单是否通过验证
			$.post(addUrl,addForm.serialize(),function(data,status){
				if(data.code==0){
					//关闭模态框
					$("#addModal").modal('hide');
					//将新增的数据追加到表格中:append-数据添加到最后，prepend-数据添加到最前
					$('#myTable').bootstrapTable('prepend', data.obj);
					//清空表单
					addForm[0].reset();
					//显示通知
			        lightyear.notify(data.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'right');
		        }else{
		        	lightyear.notify(data.msg, 'danger', 1000, 'mdi mdi-emoticon-sad', 'top', 'right');
		        }		
		    });
			}
		}
		
		//获取待编辑记录信息
		function get(id,index){
			//获取id对应的数据
			var rowData = $("#myTable").bootstrapTable('getRowByUniqueId', id);
			//将rowData中的数据填充到编辑表单中
			$("#editModal").find("#index").val(index);
			$("#editModal").find("#id").val(rowData.id);
			$("#editModal").find("#curName").val(rowData.curName);
			$("#editModal").find("#teaId").val(rowData.teaId);
			$("#editModal").find("#curCredit").val(rowData.curCredit);
			$("#editModal").find("#curTimes").val(rowData.curTimes);
			$("#editModal").find("#curLocation").val(rowData.curLocation);
		   
		    //显示模态框
		    $("#editModal").modal('show');
		}
			  
		//编辑
		function edit()
		{
			if(editForm.valid()){
				var index = $("#index").val();
				$.post(editUrl,editForm.serialize(),function(data,status){
					if(data.code==0){
						var row = data.obj;
						//关闭模态框
						$("#editModal").modal('hide');
						//编辑，数据的修改直接反映到bootstrapTable中，保证一次请求
						$('#myTable').bootstrapTable('updateRow', {index: index, row: row});
						//清空表单
						editForm.reset();
						//显示通知
				        lightyear.notify(data.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'right');
			        }else{
			        	lightyear.notify(data.msg, 'danger', 1000, 'mdi mdi-emoticon-sad', 'top', 'right');
			        }		
			    });
			}
		}
		
		
		
		//单选删除
		function deleteById(id)
		{
			var idsArr = new Array();
			idsArr[0] = id;
			deleteByIdsArr(idsArr);
		}
		
		//多选删除
		function deleteByIds(id)
		{
			//获取选中的行，数据类型是数组
			var getSelectRows = $("#myTable").bootstrapTable('getSelections');
			if(getSelectRows.length == 0){
				alert("请至少选择一条记录！");
				return;
			}
			//将选中记录的id转换为数组
			var idsArr = new Array();
			for(var i=0;i<getSelectRows.length;i++){
				idsArr[i] = getSelectRows[i].id;
			}
			deleteByIdsArr(idsArr);
		}
		
		//删除-根据给定的数组
		function deleteByIdsArr(idsArr)
		{
			var ids = idsArr.join(",");  //将数组变为字符串，形式为：1,2,3,4
			$.alert({
		        title: '删除确认',
		        content: '确定要删除选择的记录？',
				buttons: {
					confirm: {
						text: '确认',
						btnClass: 'btn-primary',
						action: function(){
							//使用ajax-基于jQuery 方式完成数据的删除  1；1,2,3，4，
							$.get(deleteUrl + ids, function(data,status){							
								if(data.code==0){	
									//前台表格中删除指定行,remove方法需要两个参数，参数1：按照哪个字段删除，参数2：待删除记录的id数组 
									$('#myTable').bootstrapTable('remove', {field:'id', values:idsArr});							
									var list = $("#myTable").bootstrapTable('getData');
									if(list.length == 0){
										$("#myTable").bootstrapTable('refresh',{pageNumber:1});
									}
							        lightyear.notify(data.msg, 'success', 3000, 'mdi mdi-emoticon-happy', 'top', 'right');
						        }else{
						        	lightyear.notify(data.msg, 'danger', 3000, 'mdi mdi-emoticon-sad', 'top', 'right');
						        }		
						    });
						}
					},
					cancel: {
						text: '取消',
						action: function () {	                    
						}
					}
				}
		    });
		}
		
		
		
		
		
		$("#myTable").bootstrapTable({
			classes : 'table table-bordered table-hover table-striped', //指定表格样式
			url : listUrl, //获取远程(后台)数据的url
			method : 'get', //请求方式 get,post
			dataType : 'json', //数据形式：json，若是跨域，则使用jsonp，因为本示例中是跨域的调用,所以涉及到ajax都采用jsonp,
			uniqueId : 'id',
			idField : 'id', // 每行的唯一标识字段 
			toolbar : '#toolbar', //指定工具栏
			//clickToSelect: true,     // 是否启用点击选中行
			showColumns : true, //是否显示所有列
			showToggle : true, //是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)		  
			showRefresh : true, //是否显示刷新按钮
			search : true, //是否启用搜索，客户端搜索
			pagination : true, //是否启用分页
			sortOrder : 'asc', //排序方式：asc-升序，desc-降序，按照idField
			queryParams : function(params) { //定义分页查询数据
				var temp = {
					pageSize : params.limit, // 每页数据量
					offset : params.offset, // sql语句起始索引
					pageNumber : (params.offset / params.limit) + 1,
					sort : params.sort, // 排序的列名
					sortOrder : params.order,
					 curName: $("#form-curriculum-query").find("#curName").val(),
					 teaId: $("#form-curriculum-query").find("#teaId").val(),
					 curCredit: $("#form-curriculum-query").find("#curCredit").val(),
					 curTimes: $("#form-curriculum-query").find("#curTimes").val(),
					 curLocation: $("#form-curriculum-query").find("#curLocation").val()
				
					 // 排序方式'asc' 'desc'
				};
				return temp;
			},
			sidePagination : 'server', // 分页方式：client客户端分页，server服务端分页
			pageNumber : 1, // 初始化加载第一页，默认第一页
			pageSize : 10, // 每页的记录行数
			pageList : [ 10, 25, 50, 100 ], // 可供选择的每页的行数
			//showExport: true,        // 是否显示导出按钮, 导出功能需要导出插件支持(tableexport.min.js)
			//exportDataType: "basic", // 导出数据类型, 'basic':当前页, 'all':所有数据, 'selected':选中的数据	
			columns : [ {
				checkbox : true
			//是否显示复选框
			}, {
				field : 'id',
				title : '课程编号',
				//visible: false,  //隐藏
				sortable : true
			//是否排序			
			}, {
				field : 'curName',
				title : '课程名称'
			}, {
				field : 'teaId',
				title : '教师编号'
			}, 
			{
				field : 'teacher.teacherName',
				title : '教师名字'
			}, 
			{
				field : 'curCredit',
				title : '学分信息'
			},{
				field : 'curTimes',
				title : '上课时间'
			}, {
				field : 'curLocation',
				title : '上课地点'
			}, {
				field : 'operate',
				title : '操作',
				formatter : btnGroup,
				events : { //行为
					'click .edit-btn' : function(event, value, row, index) {
						get(row.id, index);
					},
					'click .del-btn' : function(event, value, row, index) {
						deleteById(row.id);
					},
					'click .show-btn' : function(event, value, row, index) {
						show(row);
					}
				}

			} ]

		});

		// 操作按钮
		function btnGroup() {
			var html =  '<a href="#!" class="btn btn-xs btn-warning m-r-5 edit-btn" title="编辑" data-toggle="tooltip">编辑</a> ' +
	        '<a href="#!" class="btn btn-xs btn-info m-r-5 show-btn" title="查看" data-toggle="tooltip">查看</a> ' +
	        '<a href="#!" class="btn btn-xs btn-danger del-btn" title="删除" data-toggle="tooltip">删除</a>';
			return html;
		}


		
		
		// 操作方法 - 查看
		function show(row) {
			alert('查看详细 ');
		}
	</script>
</body>
</html>